/**
*@description CRM运营》回柜
*@author daycool
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import LineStack from '../components/CRM/LineStack';
import MyRangePicker from '../components/CRM/MyRangePicker';

import moment from 'moment';
import styles from './HomePage.less';
import {Card, Icon, Tooltip, Table, Row, Col, Button, DatePicker, Radio} from 'antd';
import toExcel from '../utils/toExcel';
import downImg from '../utils/downImg';

const RadioGroup = Radio.Group;

const {RangePicker,MonthPicker} = DatePicker;
import utils from '../utils/utils';
const {startDate, endDate} = utils.getDefaultDateRange();
const dateFormat = 'YYYY-MM';
const columns = [
  { title: '指标', width: 190, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: '2016年1月', dataIndex: 'value1', key: '1'},
  { title: '2016年2月', dataIndex: 'value2', key: '2' },
  { title: '2016年3月', dataIndex: 'value3', key: '3' },
  { title: '2016年4月', dataIndex: 'value4', key: '4' },
  { title: '2016年5月', dataIndex: 'value5', key: '5' },
  { title: '2016年6月', dataIndex: 'value6', key: '6' },
  { title: '2016年7月', dataIndex: 'value7', key: '7' },
  { title: '2016年8月', dataIndex: 'value8', key: '8' },
  { title: '2016年9月', dataIndex: 'value9', key: '9', fixed: 'right',
    width: 80 },
];

const areaColums = [
  {title: '指标', dataIndex: 'name', key: 'name', fixed: 'left', width: 190,},
  { title: '北京', dataIndex: 'value1', key: '1'},
  { title: '成都', dataIndex: 'value2', key: '2' },
  { title: '大连', dataIndex: 'value3', key: '3' },
  { title: '广州', dataIndex: 'value4', key: '4' },
  { title: '杭州', dataIndex: 'value5', key: '5' },
  { title: '昆明', dataIndex: 'value6', key: '6' },
  { title: '南京', dataIndex: 'value7', key: '7' },
  { title: '上海', dataIndex: 'value8', key: '8' },
  { title: '沈阳', dataIndex: 'value9', key: '9', fixed: 'right', width: 80 },
];

const data = [{
  key: '1',
  name: '销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '2',
  name: '会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '3',
  name: '新会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '4',
  name: '老会员销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}, {
  key: '5',
  name: '首单350以上的新会员的销售额',
  value1: 1,value2: 2,value3: 3,value4: 4,value5: 5,value6: 6,value7: 7,value8: 8,value9: 9,
}];


class CRMSale extends Component {
  constructor(props) {
      super(props);
  }
  state = {
    //startDate: startDate,
    //endDate: endDate,
    type: '整体会员',
  };
  componentWillMount() {
    this.initData();
  };
  // 获取数据
  fetchData(type, search){
    this.props.dispatch({
      type: type,
      payload: search
    })
  };
  initData(){
    this.fetchAgeData();
  };
  fetchAgeData(){
    this.fetchData('CRMdata/age', {
      //startMonth: this.state.startDate,
      //endMonth: this.state.endDate,
      vipType: this.state.type,
    });
  }
  onChange = (e) => {
    this.setState({
      type: e.target.value,
    });
  }
  //onDateChange(date, dateString) {
  //  this.setState({
  //    startDate: dateString[0],
  //    endDate: dateString[1],
  //  });
  //};
  monthOk(){
    this.fetchAgeData();
  };
  monthDownload(){
    this.exExcel(this.props.CRMdata.ageDownloadData, '年龄分布');
  };

  exExcel(downloadData, title){
      toExcel(downloadData.header, title, downloadData.data);
  };
  render(){

    const tips1 = (<Row>
      <Col span={6}>年龄分布</Col>
        <Col span={18} style={{textAlign:"right"}}>
          <RadioGroup onChange={this.onChange} value={this.state.type}>
            <Radio value="整体会员">整体会员</Radio>
            <Radio value="当年会员">当年会员</Radio>
            <Radio value="当月会员">当月会员</Radio>
          </RadioGroup>
          <Button type="primary" onClick={this.monthOk.bind(this)} className= {styles.searchOk}>确定</Button>
          <Button type="primary" onClick={this.monthDownload.bind(this)} className= {styles.searchOk}>下载数据</Button>
        </Col>
      </Row>);
  return (
    <MainLayout isShowLeft="showCRM">
        <div style={{marginTop:29}}>
                <Card title={tips1} style={{minHeight:300}}>
                      <Table style={{width:1090}} pagination={false} loading={this.props.CRMdata.ageLoading} columns={this.props.CRMdata.ageData.columns} dataSource={this.props.CRMdata.ageData.data} scroll={{ x: true }} />
                </Card>
        </div>
    </MainLayout>
  );
  }
};

CRMSale.propTypes = {
};

function mapStateToProps({ CRMdata }) {
  return {
    CRMdata: {...CRMdata},
  };
}

export default connect(mapStateToProps)(CRMSale);
